<template>
    <div style="display: flex;flex-direction: column">
      <div style="text-align: center;font-size: large">规范<span style="color: #5470c6">{{data.specName}} </span>的要素罗列如下</div>
      <div style=" padding: 10px;height: 75vh;width: 100%;box-sizing: border-box">
        <el-space wrap>
          <div v-for="item in data.tableData" :key="item">
            <el-button text> {{ item.element }} </el-button>
          </div>
        </el-space>
      </div>
    </div>
  <div style="height: 8vh;">

  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {reactive} from "vue";
import {ElLoading, ElMessageBox} from "element-plus";
import request from "@/utils/request.js";

const route = useRoute();

const data = reactive({
  //表格数据
  tableData: [],
  specId: route.query.specId,//点击查看规范的specId
  specName: route.query.specName,//点击查看规范的specName
})

const Load = () => {
  let loadingInstance = ElLoading.service({fullscreen: true}); // 启动全屏加载动画

  request.get(`/java/specification/detail?specId=${data.specId}`)
      .then((response) => {
        console.log("数据：", response);
        data.tableData = response.data.records;
        data.total = response.data.total;
      })
      .catch((error) => {
        console.error('请求发生错误:', error);
      })
      .finally(() => {
        loadingInstance.close(); // 无论请求成功或失败，都关闭加载动画
      });
};

Load()




</script>

<style scoped>

</style>